import { useTranslation } from 'react-i18next'
import { Table, ConfigProvider, Button } from 'antd'
import { useState } from 'react'
import './locales/i18n'
import zhCN from 'antd/lib/locale/zh_CN'
import en_US from 'antd/lib/locale/en_US'

export default function App() {
  const { t, i18n } = useTranslation(['app'])
  const [lang, setLang] = useState('zh')
  const columns = [
    {
      title: t('id'),
      key: 'id',
      render: (text: any, record: any, index: number) => {
        return index + 1
      },
      width: 200,
    },
    {
      title: t('name'),
      key: 'name',
      dataIndex: 'name',
      width: 200,
    },
    {
      title: t('age'),
      key: 'age',
      dataIndex: 'age',
      width: 200,
    },
    {
      title: t('hobby'),
      key: 'hobby',
      dataIndex: 'hobby',
    },
  ]
  const data = [
    {
      name: '轩轩',
      age: 10,
      hobby: 'Play outside.',
    },
    {
      name: '轩轩',
      age: 10,
      hobby: 'Play outside.',
    },
  ]
  return (
    <div>
      <button
        onClick={() => {
          i18n.changeLanguage('zh')
          setLang('zh')
        }}
      >
        中文
      </button>
      <button
        onClick={() => {
          i18n.changeLanguage('en')
          setLang('en')
        }}
      >
        english
      </button>
      <hr />
      <div>
        {t('helo')},{t('sz')}
      </div>
      <div>
        {t('dogname')},{t('dogage')}
      </div>
      <Button>{t('click')}</Button>
      <ConfigProvider locale={lang === 'zh' ? zhCN : en_US}>
        <Table
          columns={columns}
          dataSource={data}
          pagination={{ total: 50, showSizeChanger: true }}
        />
      </ConfigProvider>
    </div>
  )
}
